#{extends 'content.html' /}
#{set title: '我的首页' /}
#{set user : usr/}
#{set user_name : usr.name/}
#{set user_img : usr.avatar/}
#{set user_post_cnt : usr.postCnt/}
#{set user_followers_cnt : usr.followersCnt/}
#{set user_following_cnt : usr.followingCnt/}
#{set index :'active' /}
<script type="text/javascript">
    //微博字数统计与限制
    (function ($) {
        // tipWrap:  提示消息的容器
        // maxNumber:  最大输入字符
        
        $.fn.artTxtCount = function (tipWrap, maxNumber) {
            var countClass = 'js_txtCount',
            // 定义内部容器的CSS类名
            fullClass = 'js_txtFull',
            // 定义超出字符的CSS类名
            disabledClass = 'disabled'; // 定义不可用提交按钮CSS类名
            // 统计字数
            var count = function () {
                var btn = $(this).closest('form').find(':submit');
                val = $(this).val().length,
                // 是否禁用提交按钮
                disabled = {
                    on: function () {
                        btn.removeAttr('disabled').removeClass(disabledClass);
                    },
                    off: function () {
                        btn.attr('disabled', 'disabled').addClass(disabledClass);
                    }
                };
                if (val == 0) disabled.off();
                if (val <= maxNumber) {
                    if (val > 0) disabled.on();
                    tipWrap.html('<span class="' + countClass + '">\u8FD8\u80FD\u8F93\u5165 <strong>' + (maxNumber - val) + '</strong> \u4E2A\u5B57</span>');
                } else {
                    disabled.off();
                    tipWrap.html('<span class="' + countClass + ' ' + fullClass + '">\u5DF2\u7ECF\u8D85\u51FA <strong>' + (val - maxNumber) + '</strong> \u4E2A\u5B57</span>');
                };
            };
            $(this).bind('keyup change', count);
            return this;
        };
    })(jQuery);
 
    // demo
    jQuery(function(){
        // 批量
        $('.autoTxtCount').each(function(){
            $(this).find('.text').artTxtCount($(this).find('.tips'), 140);
        });
        // 单个
        $('#test').artTxtCount($('#test_tips'), 10);
    }
);

</script>

<script type="text/javascript">
    $(function(){

        (function($){
            $.extend({
                uniq:function(l){
                    var r = [];
                    var i,j;
                    for(i=0;i<l.length;i++){
                        for(j=i+1;j<l.length;j++){
                            if(l[i]==l[j]){
                                break;
                            }
                        }
                        if(j==l.length){
                            r.push(l[i]);
                        }
                    }
                    return r;
                },
                getAts:function(content){
                    var ats = content.match(/@.+?(\s|$)/g) || [];                    
                    for(var i=0;i<ats.length;i++){
                        ats[i] = "ats="+ats[i].substring(1).trim()
                    }
                    ats = $.uniq(ats);
                    return ats.join("&");
                }
            });
        })(jQuery);     
        
        //发布新微博
        $("#buttonUpload").click(function (e) { 
            e.preventDefault();
            var content = $("#textfild textarea").val();
           
            $.ajaxFileUpload({ 
                url:'@{Application.publish}?content='+content+"&"+$.getAts(content), //你处理上传文件的服务端 
                secureuri:false, //与页面处理代码中file相对应的ID值
                fileElementId:'img', 
                dataType: 'json' //返回数据类型:text，xml，json，html,scritp,jsonp五种
                /*success: function (data) { 
                    alert(data.file_infor); 
                } */
            })
            var cnt = $("#postCnt").text();
            cnt = parseInt(cnt)+1
            var cnt = $("#postCnt").text(cnt); 
            //alert("发表成功");
        });
    });      
</script>

<style>
    /* demo */
    textarea{ resize:none }
    #textfild {
        width:530px;
    }
    #textfild .help, #textfild .help a {
        color:#999;
    }
    #textfild form {
        margin:20px 0;
        padding:8px;
        background:#F4F4F4;
        border:1px solid #EDEDED;
    }
    #textfild .tips {
        color:#999;
        padding:0 5px;
    }
    #textfild .tips strong {
        color:#1E9300;
    }
    #textfild .tips .js_txtFull strong {
        color:#F00;
    }
    #textfild textarea.text {
        width:504px;
    }
</style>

<!-- 微博文本框  -->
<div id="textfild">
    <form class="autoTxtCount" action="" method="post">
        <div>
            <textarea class="text" name="" cols="50" rows="3" rel="tooltip" title="微博输入框"></textarea>
        </div>
        <div>
            <button id="buttonUpload" class="btn btn-primary" rel="tooltip" title="发布微博按钮" disabled="disable" >发表</button>
            <button type="reset" class="btn">取消</button>
            <input class="input" id="img" type="file" name="img" style=" position: relative;top:5px"  accept="image/*"/>
            <span class="tips"></span> 
        </div>
    </form>
</div>
<hr>
<!-- 微博列表、转发、评论 -->
<div id="allpost">
    #{list items: allMBlog, as: 'post'}
    <div id="div${post.id}">
        <img src="${post.author.avatar}" style="width: 50px;height: 50px" >        
        <br>
        <!-- 微博内容 -->
        <div style="position: relative;left: 60px;top:-35px; width: 440px" >
            <p style=" float: left; color: #008aff">${post.author.name}：</p>
            ${post.content}
            <br>
            <br>
            #{if post.image!=null}
            <img style="height:100px;cursor:pointer" class="postImg" src="${post.image}">
            <br>
            #{/if}
            <!--转发的微博 -->
            #{if post.originId!=0}
            <div class="alert alert-info" style="position: relative;left: 0px;top:5px; width: 420px">
                <p style=" float: left; color: #008aff">@${models.MBlog.findById(post.originId).author.name}:</p>
                ${models.MBlog.findById(post.originId).content}
                #{if models.MBlog.findById(post.originId).image!=null}
                <br>
                <br>
                <img style="height:100px;cursor:pointer" class="postImg" src="${models.MBlog.findById(post.originId).image}">
                <br>
                #{/if}  
                <br>
                <p style="color: #008aff">${models.MBlog.findById(post.originId).createAt}</p>
            </div>
            #{/if}
            <br>
            <p style="color: #008aff">${post.createAt}</p>
        </div>
        <div  style=" position: relative;left: 420px;top:-62px">
            |&nbsp;
            <a style=" position: relative;left: 0px;top:1px" data-postid="${post.id}" data-toggle="modal" href="#modalbackdroptrue"  >
                转发(${post.forwardCnt})
            </a>
            #{if post.author.equals(usr)}
            |
            <a style=" position: relative;left: 0px;top:1px" class="del" data-mypostsid="${post.id}" onclick="$.get('@{Application.deleteMBlog(post.id)}') " href="#" >
                删除
            </a>
            #{/if}           
        </div>
        <!-- 评论 -->
        <div class="accordion" id="accordion2">
            <div class="accordion-heading">
                <a id="comText${post.id}" style=" position: relative;left: 358px;top:-87px; width: 48px"   class="accordion-toggle" data-postComCnt="${post.commentCnt}" data-toggle="collapse" data-loaded="0" data-parent="#accordion2" data-postid="${post.id}" href="#${post.id}">
                    评论(${post.commentCnt})
                </a>
                <div style="width: 470px; position: relative;left: 60px;top:-82px" id="${post.id}" class="accordion-body collapse">
                    <div class="accordion-inner   alert alert-info">
                        <form name="comment">
                            <input style="width: 375px;" type="text" class="span6" placeholder="请输入评论...">
                            <input style="position: relative;top:-5px" type="button" class="btn" value="评论"  data-postid="${post.id}" data-authorid="${post.author.id}">
                        </form>  
                        <div id="com${post.id}">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <hr>
    </div>
    
    #{/list} 
</div>
<!-- 转发微博 -->
<div id="modalbackdroptrue" class="modal hide fade">
    <div class="modal-header">
        <a class="close" data-dismiss="modal" >&times;</a>
        <h3>转发微博</h3>
    </div>
    <div class="modal-body">
        <div id="textfild">
            <form class="autoTxtCount" action="" method="get">
                <div>
                    <textarea class="text" name="" cols="50" rows="3"></textarea>
                </div>
                <div>
                    <span class="tips"></span> 
                </div>
            </form>
        </div>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal" >关闭</a>
        <a href="#" class="btn btn-primary">转发</a>
    </div>
</div>


<!-- 微博列表翻页
<div class="pagination">
    <ul>
        <li><a href="#">前一页</a></li>
        <li class="active">
            <a href="#">1</a>
        </li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">...</a></li>
        <li><a href="#">后一页</a></li>
    </ul>
</div>
-->
<script>
        /*
    $(function(){
        
        $(".accordion-toggle").click(function(e){
            e.preventDefault();
            var  s = #{jsAction @Application.getComment(':postId') /}; 
            var postId = $(this).attr("data-postid");
            $newDiv = $("<div></div>");
            var url = s({postId:postId});
            $newDiv.load(url);
            $newDiv.appendTo("body");

        });
        $("#modalbackdroptrue").modal({
            show:false
        });        
    
    
        //获取新微博
        $(function(){
            var getNewMBlogs = function(){
                $("<div style=\"display: none\"></div>").load("@{Application.getNewMBlogs}", function(){
                    $("#allpost").prepend($(this));
                    $(this).slideDown(1000);                   
                    getNewMBlogs();
                });
            };
            getNewMBlogs();
        });

        $(".modal-footer .btn-primary").click(function(){
                
            var url = "/application/publish"
            var content = "123"
            var originPostId = "1"
            url = url+"?content="+content+"&originPostId="+originPostId;
            alert(url);
            $.get(url);
            $("#modalbackdroptrue").modal("hide");
        });
    });*/
</script>
